// components/Sidebar.tsx
import cjglIcon from '@/assets/cjgl.png'; // 场景管理
import dmxglIcon from '@/assets/dmxgl.png'; // 大模型管理
import mbglIcon from '@/assets/mbgl.png'; // 模板管理
import rzmxIcon from '@/assets/rzmx.png'; // 日志明细
import sjtjIcon from '@/assets/sjtj.png'; // 数据统计
import zskIcon from '@/assets/zsk.png'; // 知识库

import cjglSelectIcon from '@/assets/cjgl_s.png'; // 场景管理
import dmxgSelectlIcon from '@/assets/dmxgl_s.png'; // 大模型管理
import mbglSelectIcon from '@/assets/mbgl_s.png'; // 模板管理
import rzmxSelectIcon from '@/assets/rzmx_s.png'; // 日志明细
import sjtjSelectIcon from '@/assets/sjtj_s.png'; // 数据统计
import zskSelectIcon from '@/assets/zsk_s.png'; // 知识库

import { Layout, Menu } from 'antd';
import React from 'react';
import styles from './index.less';
const { Sider } = Layout;

const items = [
  {
    key: '1',
    icon: <img className={styles.icon} src={cjglIcon} />,
    selectIcon: <img className={styles.icon} src={cjglSelectIcon} />,
    label: '场景管理',
  },
  {
    key: '2',
    icon: <img className={styles.icon} src={dmxglIcon} />,
    selectIcon: <img className={styles.icon} src={dmxgSelectlIcon} />,
    label: '大模型管理',
  },
  {
    key: '3',
    icon: <img className={styles.icon} src={mbglIcon} />,
    selectIcon: <img className={styles.icon} src={mbglSelectIcon} />,
    label: '模板管理',
  },
  {
    key: '4',
    icon: <img className={styles.icon} src={zskIcon} />,
    selectIcon: <img className={styles.icon} src={zskSelectIcon} />,
    label: '知识库',
  },
  {
    key: '5',
    icon: <img className={styles.icon} src={rzmxIcon} />,
    selectIcon: <img className={styles.icon} src={rzmxSelectIcon} />,
    label: '日志明细',
  },
  {
    key: '6',
    icon: <img className={styles.icon} src={sjtjIcon} />,
    selectIcon: <img className={styles.icon} src={sjtjSelectIcon} />,
    label: '数据统计',
  },
];

const Sidebar: React.FC = () => {
  const [selectedKey, setSelectedKey] = React.useState('1');
  const handleClick = (key: string) => {
    setSelectedKey(key);
  };

  return (
    <div className={styles.sidebar}>
      <div className={styles.content}>
        <div className={styles.title}>运营配置</div>
        <Sider width={200} theme="light">
          <Menu
            mode="inline"
            defaultSelectedKeys={[selectedKey]}
            style={{ height: '100%', borderRight: 0 }}
          >
            {items.map((item) => {
              return (
                <Menu.Item
                  key={item.key}
                  icon={selectedKey === item.key ? item.selectIcon : item.icon}
                  onClick={() => handleClick(item.key)}
                >
                  {item.label}
                </Menu.Item>
              );
            })}
          </Menu>
        </Sider>
      </div>
    </div>
  );
};

export default Sidebar;
